<template>
	<view class="list-staff">
		<view class="list clearfix" v-for="(item, index) in list" :key="index">
			<view @click="getquery(item)">
				<image class="fl" :src="item.portrait||''" />
				<view class="fl cont">
					<view class="title clearfix">
						{{item.name}}<text class="follow fr" v-show="follow">取消关注</text>
						<staff-state v-if="state" :status="item.statusId"></staff-state>
					</view>
					<uni-rate active-color="#FCC800" max="5" is-fill="false" size="11" disabled="true" :value="item.score"></uni-rate>
					<view class="intro">主营业务：{{item.introduction||''}}</view>
					<view class="nav clearfix">
						<view class="fl">
							<text>{{item.age}}岁</text>
							<text>{{item.nativePlace}}人</text>
							<text>从业{{item.workExperience}}年</text>
						</view>
						<view class="fr" v-if="item.univalence">{{item.univalence}}元/小时</view>
						<!-- <view class="fr">180/天起</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import UniRate from '@/components/uni-rate/uni-rate.vue'
import StaffState from '@/components/button/StaffState.vue'
export default {
	components: {
		UniRate,
		StaffState
	},
	data(){
		return{
			status:0
		}
	},
	props: {
		state:false,
		follow:false,
		id:'',
		list: {
			// 数据列表
			type: Array,
			default() {
				return [];
			}
		}
	},
	methods:{
		getquery(item) {
			uni.navigateTo({
				url: '/pages/details/details-staff?sid=' + item.id + '&id=' + this.id,
			})
		}
	}
};
</script>

<style scoped lang="scss">
.list {
	overflow:hidden;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #dfdfdf;
}
.list image {
	width: 170rpx;
	height: 204rpx;
	border-radius: 10rpx;
	background-size: cover;
	background-position: center 0;
}
.list .cont {
	width: 500rpx;
	margin-left: 16rpx;
}
.list .cont .title {
	font-size: 28rpx;
	color: #333;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	line-height: 40rpx;
	height: 40rpx;
	margin-bottom: 12rpx;
	font-weight: 500;
	margin-top: 10rpx;
}
.list .cont .follow{
	color: $uni-color1;
	font-size: 26rpx;
	line-height: 45rpx;
	
}
.list .cont .title view{
	color: #666;
}

.list .cont .intro{
	font-size: 24rpx;
	color: #666;
	letter-spacing: 0.6rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 12rpx 0 16rpx 0;
}
.list .cont .nav{
	line-height: 32rpx;
	font-size: 24rpx;
	color: #999;
	letter-spacing: 0.6rpx;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.list .cont .nav text{
	display: inline-block;
	height: 26rpx;
	line-height: 26rpx;
	border-right: 1rpx solid #999;
	padding-right: 14rpx;
	margin-right: 14rpx;
}
.list .cont .nav text:last-child{
	padding: 0;
	margin: 0;
	border: 0 none;
}
.list .cont .nav .fr{
	font-size: 26rpx;
	color: #FF3428;
	font-weight: 500;
}
</style>
